import { useEffect, useState } from 'react';
import { useForm, useWatch } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import Button from 'src/component/Button';
import Form from 'src/component/Form';
import FormInput from 'src/component/FormInput';
import FormSelect from 'src/component/FormSelect';
import Modal from 'src/component/Modal';
import SelectOption from 'src/component/SelectOption';
// import { AddAddressForm } from 'src/model/Form';
import { RootState } from 'src/redux/store';
import { openSnackbar } from 'src/redux/uiSlice';
// import { createContact } from 'src/service/propertyService';
import { addMyAddress } from 'src/service/moneyService'
import style from './AddWithdrawalAddressModal.module.scss';

type AddAddressForm = {
    coin: string,
    network: string,
    label: string,
    address: string,
}

type Props = {
    open: boolean;
    handleClose: () => void;
    onFinish: () => void;
};

const AddWithdrawalAddressModal = ({ open, handleClose, onFinish }: Props) => {
    const { t } = useTranslation();
    const dispatch = useDispatch();
    const { crypto } = useSelector((rootState: RootState) => rootState.coin);
    const { accountInfo } = useSelector((rootState: RootState) => rootState.auth);
    const [showNetwork, setShowNetwork] = useState<boolean>(true);
    const newAddressFormMethods = useForm<AddAddressForm>();
    const formData = useWatch({ control: newAddressFormMethods.control });
    const token = localStorage.getItem("token")
    const onNewAddressFormSubmit = (data: AddAddressForm) => {
        handleClose();
        addMyAddress({
            token: token,
            FUserID: accountInfo?.FID,
            FType: data.coin,
            FNet: data.network,
            FTag: data.label,
            FAddress: data.address,
        }).then(res => {
            if (res.success) {
                newAddressFormMethods.reset();
                onFinish();
            }
        })
        // createContact(data)
        //   .then(() => {
        //     newAddressFormMethods.reset();
        //     onFinish();
        //   })
        //   .catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
    };

    useEffect(() => {
        // if (formData.coin === 'usdt') {
        //     setShowNetwork(true);
        //     newAddressFormMethods.setValue('network', 'trc20');
        // } else {
        //     setShowNetwork(false);
        //     newAddressFormMethods.setValue('network', '');
        // }
    }, [formData.coin]);

    return (
        <Modal open={open} handleClose={handleClose}>
            <Form
                className={style.self}
                methods={newAddressFormMethods}
                onSubmit={onNewAddressFormSubmit}
            >
                <div className={style.heading}>新增提领地址</div>
                <div className={style.input}>
                    <FormSelect
                        label="币别"
                        name="coin"
                        defaultValue="USDT"
                        required
                        asterisked
                    >
                        <SelectOption value="USDT">
                            USDT
                        </SelectOption>
                    </FormSelect>
                </div>
                <div className={style.input}>
                    <FormSelect
                        label="网路"
                        name="network"
                        defaultValue="TRC20"
                        required
                        asterisked
                    >
                        <SelectOption value="TRC20">
                            TRC20
                        </SelectOption>
                    </FormSelect>
                </div>
                <div className={style.input}>
                    <FormInput
                        label="标签"
                        name="label"
                        maxLength={64}
                        required
                        asterisked
                    />
                </div>
                <div className={style.input}>
                    <FormInput
                        label="地址"
                        name="address"
                        maxLength={256}
                        required
                        asterisked
                    />
                </div>
                <div className={style.createButton}>
                    <Button type="submit">建立</Button>
                </div>
            </Form>
        </Modal>
    );
};

export default AddWithdrawalAddressModal;
